<template>
  <view class="main">
    <lawTopBar :backgroundUrl="backgroundUrl" :title="title"></lawTopBar>
    <view class="content">
      <view class="show_content">
        <view id="content_isHeight">
          <view class="content_top" @click="goSearch">
            <!-- 搜索 -->
            <u-search
              placeholder="输入您想了解的内容"
              :showAction="false"
              bgColor="#fff"
              borderColor="#C4C4C4"
              height="70rpx"
              :disabled="true"
            ></u-search>
          </view>
          <view v-if="!this.form.keyword">
            <picker
              :range="levelList"
              range-key="name"
              @change="chooseLevel"
              @cancel="LevelCancel"
            >
              <view class="level1"
                >{{ chooseLevel1TypeName
                }}<u-icon
                  name="arrow-down-fill"
                  color="#000000"
                  size="12"
                ></u-icon>
              </view>
            </picker>
            <!-- 分类 -->
            <view class="sort">
              <view
                :class="[
                  'sort_item',
                  chooseTagId == item.id ? 'sort_item_active' : '',
                ]"
                v-for="item in level2List"
                :key="item.id"
                @click="chooseTag(item)"
                >{{ item.name }}</view
              >
            </view>
          </view>

          <view v-else class="result"
            >为你找到
            <text style="color: #ff0000">{{ count }}</text> 个结果</view
          >
        </view>
        <scroll-view
          class="content_list"
          :style="{ height: `calc(100vh -  540rpx)` }"
          :scroll-y="true"
          :scroll-top="scrollTop"
          refresher-enabled="true"
          :refresher-triggered="isRefreshing"
          @refresherrefresh="reload"
          @scrolltolower="loadMore"
        >
          <view
            class="content_item"
            v-for="(item, index) in lawList"
            :key="index"
            @click="toInfo(item.id)"
          >
            <view class="item_top">
              <view class="item_dot"></view>
              <view
                class="item_title ellipsis2"
                v-html="hightLightText(item.name, form.keyword)"
              ></view>
            </view>
            <view class="item_bottom">
              <view class="item_dot"></view>
              <view class="item_info">
                <view class="potency">效力注释：{{ item.active_info }}</view>
                <view class="time">发文日期：{{ item.push_date }}</view>
              </view>
            </view>
          </view>
          <uni-load-more :status="loadMoreStatus"></uni-load-more>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script
  type="text/javascript"
  src="plus-confusion://../law/acct/index/index"
></script>

<style lang="scss">
.main {
  background: #fff;

  .content {
    width: 100%;
    position: relative;
    z-index: 10;
    margin-top: -32rpx;
    background: #fff;
    border-radius: 40rpx;
    padding: 30rpx;
    box-sizing: border-box;

    .content_top {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .level1 {
      display: flex;
      align-items: center;
      margin-top: 42rpx;
    }

    .sort {
      margin-top: 40rpx;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-start;

      .sort_item {
        display: inline-block;
        margin-bottom: 17rpx;
        padding: 12rpx 22rpx;
        background: #f6f6f6;
        border-radius: 74rpx;
        font-size: 24rpx;
        color: #333333;
        line-height: 35rpx;
        margin-left: 10rpx;

        &:first-child {
          margin-left: 0;
        }
      }

      .sort_item_active {
        background: #1c87f3;
        color: #fff;
      }
    }

    .result {
      margin: 40rpx 0 50rpx 0;
    }

    .content_list {
      margin-top: 40rpx;

      .content_item {
        margin-bottom: 60rpx;

        .item_top,
        .item_bottom {
          display: flex;
          align-items: center;

          .item_dot {
            margin-right: 30rpx;
            width: 16rpx;
            height: 16rpx;
            background: #d7e5ff;
            border-radius: 50%;
          }

          .item_title {
            width: calc(100% - 46rpx);
            font-size: 34rpx;
            font-weight: 600;
            color: #3d3d3d;
            line-height: 40rpx;
          }
        }

        .item_bottom {
          margin-top: 24rpx;

          .item_dot {
            visibility: hidden;
          }

          .item_info {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 24rpx;
            color: #bcbcbc;
            line-height: 28rpx;
          }
        }
      }
    }
  }
}
</style>
